import React, { Component } from 'react';
import { getRemengeshou } from '../../utils/api';
import './Remengeshou.css';

export default class Remengeshou extends Component {
	state = {
		list: [],
		type: 1
	}
	componentDidMount () {
		this.getRemengeshous();
	}
	async getRemengeshous () {
		const geshou = await getRemengeshou(this.state.type);
		this.setState({
			list: geshou.list.artists.slice(0, 20)
		})
	}
	async changeType (type) {
		const geshou = await getRemengeshou(type);
		this.setState({
			list: geshou.list.artists.slice(0, 20),
			type
		})
	}
	render () {
		let { list } = this.state;
		return (
			<div className='geshou main'>
				<div className='geshou_tag'>
					<div className='geshou_tag_f'>
						<h2>地区</h2>
						<ul>
							<li onClick={() => { this.changeType(1) }} className={this.state.type === 1 ? 'active red' : 'red'}>华语</li>
							<li onClick={() => { this.changeType(2) }} className={this.state.type === 2 ? 'active red' : 'red'}>欧美</li>
							<li onClick={() => { this.changeType(3) }} className={this.state.type === 3 ? 'active red' : 'red'}>韩国</li>
							<li onClick={() => { this.changeType(4) }} className={this.state.type === 4 ? 'active red' : 'red'}>日本</li>
						</ul>
					</div>
				</div>
				<div className='geshou_content'>
					<ul className='geshou_box'>
						{list.map((item) => (
							<li key={item.id} onClick={() => { window.sessionStorage.removeItem("serachlocation"); this.props.history.push(`/search?keywords=${item.name}&type=1`); }}>
								<div className='img'>
									<img width='100%' height='100%' src={item.picUrl} alt="" />
									<div className='des'>查看所有歌曲</div>
								</div>
								<p>{item.name}</p>
							</li>
						))}
					</ul>
				</div>
			</div>
		)
	}
}
